<script setup>
  import {ref} from "vue";

  const userArr=ref([])
  const user=ref({
    name:'',
    salary:'',
    job:''
  })

  const del=(index,row)=>{
    if (confirm('确定删除'+row.name+'吗？')){
    userArr.value.splice(index,1)
    }
  }

  const btn=()=>{
    if (!user.value.name ||!user.value.salary || !user.value.job ||
        !user.value.name.trim() || !user.value.salary.trim() || !user.value.job.trim()){
      alert('请输入完整信息')
      return
    }
    userArr.value.push(user.value)
    user.value={}
  }
</script>

<template>
<h1>EL-员工列表综合练习</h1>
  <el-form label-width="80px" style="margin:0 auto;width:800px;">
      <el-form-item label="姓名">
        <input type="text" placeholder="请输入姓名" v-model="user.name" style="width: 480px;">
      </el-form-item>
      <el-form-item label="工资">
        <input type="text" placeholder="请输入工资" v-model="user.salary" style="width: 480px;">
      </el-form-item>
      <el-form-item label="职位">
        <input type="text" placeholder="请输入职位" v-model="user.job" style="width: 480px;">
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="btn">点我提交</el-button>
      </el-form-item>
  </el-form>
  <el-table :data="userArr" style="width:800px;margin: 0 auto">
      <el-table-column label="编号" type="index" width="80" align="center"/>
      <el-table-column label="姓名" prop="name"/>
      <el-table-column label="工资" prop="salary"/>
      <el-table-column label="职位" prop="job"/>
      <el-table-column>
      <template #default="scope">
          <el-button type="danger" round @click="del(scope.$index,scope.row)">删除</el-button>
      </template>
      </el-table-column>
  </el-table>
</template>

<style scoped>

</style>